<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

    <style>
        #login{
            width: 480px;
            height: 300px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div id="login">
        <el-card>
            <span style="color:red">{{error}}</span>
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="记住我">
                    <el-checkbox v-model="user.rememberMe"></el-checkbox>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <script>
        new Vue({
           el:"#login",
           data:{
               //登录用户数据
               user:{username:"",password:"",rememberMe:false},
               error:"" //错误信息
           },
            methods:{
               //登录
               login(){
                   axios.post("/doLogin",
                       Qs.stringify(this.user))//qs将json格式转为表单格式
                   .then(res => {
                           console.log(res.data);
                           //判断是否返回了用户信息
                           if(res.data.username){
                               location.href = "index.html";
                           }else{
                               this.error = res.data.msg;
                           }
                   });
               }
            }
        });
    </script>
</body>
</html>